$breakPoints: (
  'phone': (
    320px,
    480px
  ),
  'pad': (
    481px,
    768px
  ),
  'notebook': (
    769px,
    1024px
  ),
  'desktop': (
    1025px,
    1200px
  ),
  'tv': 1201px
);

// 定义一个名为responseTo的mixin，用于响应式布局
@mixin responseTo($breakname) {
  // 获取断点的值
  $dp: map-get($breakPoints, $breakname);
  // 如果断点的值是一个列表
  @if type-of($dp) == 'list' {
    // 使用min-width和max-width属性设置媒体查询
    @media (min-width: nth($dp, 1)) and (max-width: nth($dp, 2)) {
      // 执行传入的代码
      @content;
    }
  } @else {
    // 如果断点的值不是一个列表，使用min-width属性设置媒体查询
    @media (min-width: $dp) {
      // 执行传入的代码
      @content;
    }
  }
}
